<template>
	<view class="flex flex-column m-3 my-2 fixed-top bottom-0 p-2 bg-white">
		<view style="height: 100rpx;" class="border-bottom flex justify-between align-center">
			<view class="">数量：{{comCodeList.length}}件</view>
			<view @click="showPopup=true" style="border-radius: 40rpx;" class="bg-primary text-white p-2 py-1">查看未扫描</view>
		</view>
		<view class="flex align-center justify-around py-4">
			<view class="">唯一码：</view>
			<view class="">已扫描：{{alreadyCodeList.length}}</view>
		</view>
		<view class="flex-1 px-1 flex flex-column justify-between">
			<view  style="overflow: auto;" class="flex-1 flex flex-wrap content-start">
				<template v-for="(item,index) in comCodeList">
					<view :key="index" style="width: 50%;" :class="['text-center', 'p-1', item.scan?'isscan':'']">{{item.unitNo}}</view>
				</template>
			</view>
			<view @click="scanCode" style="border-radius: 40rpx; height: 80rpx;line-height: 80rpx;" class="w-100 bg-primary text-center text-white my-2">扫码</view>
		</view>
		
		<u-popup closeable v-model="showPopup" mode="center">
			<view style="width: 700rpx; background-color: rgba(0,0,0,0);" class="flex flex-column justify-center align-center">
				<view style="border-radius: 16rpx; width: 90%;" class=" bg-white">
					<view class="border-bottom flex align-center justify-around mx-4 py-3 my-1">
						<view class="">未扫描：</view>
						<view class="">数量：{{allCodeList.length}}</view>
					</view>
					<scroll-view scroll-y style="height: 350rpx;">
						<view
						class=" flex flex-wrap content-start"
						>
						<template v-for="(item,index) in allCodeList">
							<view :key="index"  style="width: 50%;" class="text-center p-1">{{item.unitNo}}</view>
						</template>
						</view>
					</scroll-view>
					<view v-if="allCodeList.length" @click="copyContent" class="text-center my-2">复制</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup:false,
				alreadyCodeList:[],
				allCodeList:[],
				isShow:false
			}
		},
		watch:{
			
		},
		computed:{
				comCodeList(){
					return this.alreadyCodeList.concat(this.allCodeList)
				}
		},
		methods: {
			copyContent(){
				let newArr = this.allCodeList.map(item => {
					return item.unitNo
				})
				uni.setClipboardData({
					data: newArr.join(','),
					success: function() {
						// console.log('success');
					}
				});
			},
			scanCode(){
				// 允许从相机和相册扫码
				uni.scanCode({
				    success: (scanRes) => {
						// 判断是否更新列表数据
						let updata = this.allCodeList.some(item => {
							return item.unitNo===scanRes.result
						})
						if(updata){
							this.allCodeList.map((item,index) => {
								if(item.unitNo===scanRes.result){
									item.scan=true
									this.alreadyCodeList.push(item)
									this.allCodeList.splice(index,1)
								}
							})
							return
						}
						this.alreadyCodeList = []
						this.$store.dispatch('getWorkUnitsByUnitNo', {unitNo:scanRes.result}).then((res) => {
						  if(res.errorCode===0){
							  this.allCodeList = res.data
							  this.allCodeList.forEach((item,index) => {
							  	if(item.unitNo===scanRes.result){
							  		item.scan=true
							  		this.alreadyCodeList.push(item)
							  		this.allCodeList.splice(index,1)
							  	}
							  })
						  }
						})
				    }
				});
			}

		}
	}
</script>

<style lang="scss">
	.isscan{
		color: #5880ff;
	}
.dialog {
	width: 550rpx;
	height: 750rpx;
	// background-image: url(../../../static/image/my/dialog@2x.png);
	background-size: 100% 100%;
	.updata-content {
		color: #858585;
		p {
			font-size: 22rpx;
			line-height: 1.8;
		}
	}
	.updata-btn {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50rpx;
		background-color: #5880ff;
		color: #ffffff;
	}
}
.close-btn {
	width: 80rpx;
	height: 80rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
